<template>
  <div>
    <h1>超市</h1>
    <p>商品：<input type="text" v-model="form.name"></p>
    <p>价钱：<input type="text" v-model="form.price"></p>
    <button @click="add">添加</button>
    <div>
      <table align="center">
        <tr>
          <td>商品</td>
          <td>价格</td>
          <td>操作</td>
        </tr>
        <tr v-for="i in shoping">
          <td>{{ i.name }}</td>
          <td>￥{{ i.price }}</td>
          <td>
            <button @click="del(i.id)">删除商品</button>
          </td>
        </tr>
      </table>
      <button v-for="i in tpage" @click="get_shop(i)">{{i}}</button>
    </div>
  </div>
</template>

<script>
export default {
  name: "shops",
  data() {
    return {
      form: {},
      shoping: [],
      tpage:0
    }
  },
  methods: {
    add() {
      this.$axios.post('shops', this.form)
        .then(res => {
          if (res.data.code == 200) {
            alert('ok')
            this.form = {}
            this.get_shop()
          } else {
            alert('no')
          }
        })
    },
    get_shop(i) {
      this.$axios.get('shops?page='+i)
        .then(res => {
          this.shoping = res.data.list
          this.tpage = res.data.tpage

        })
    },
    del(id) {
      this.$axios.delete('shops?id=' + id)
        .then(res => {
         this.get_shop()
        })
    }
  },
  mounted() {
    this.get_shop(1)
  }
}
</script>

<style scoped>

</style>
